import React from 'react'
import { NavBar } from 'react-vant'
import { Form, Button, Input,Toast } from 'antd-mobile'
import { dlapi } from '../../request/api'
import {useNavigate} from 'react-router-dom'
function Index() {
let nav=useNavigate()
    const [form] = Form.useForm()
    const onFinish = (values) => {
        // 登录接口
        dlapi({username:values.name,password:values.psd}).then(res=>{
            console.log('dl',res)
            // 返回登录成的状态码后，存储token,userInfo
            if(res.data.code==200){
                 Toast.show(res.data.message)
                localStorage.setItem('token',res.data.data.token)
                localStorage.setItem('userinfo',JSON.stringify(res.data.data.userInfo))
                // 跳转到首页
                nav('/')
            }
        })
       
    }
    return (
        <div>
            <NavBar></NavBar>
            <div style={{ margin: '15px 19px' }}>
                <h3 style={{ fontSize: '21px' }}>登陆您的12306账号</h3>
                <br />
                <p style={{ fontSize: '15px', lineHeight: '22px' }}>
                    友列高铁承诺保证您的账号及个人信息的安全，绝不提供给任何第三方，绑定即视为同意《免责与隐私申明》
                </p>
                {/* 表单 */}
                <Form
                    form={form}
                    onFinish={onFinish}
                    layout='horizontal'
                    style={{ marginTop: '50px' }}
                    footer={
                        <Button block type='submit' size='large' style={{ '--background-color': '#ccc', '--text-color': '#fff' }}>
                            登录
                        </Button>
                    }
                >
                    <Form.Item
                        name='name'
                        //   label='姓名'
                        rules={[{ required: true, message: '手机号/账号不能为空' }]}
                    >
                        <Input onChange={console.log} placeholder='请输入手机号/账号' />
                    </Form.Item>
                    <Form.Item
                        style={{ margin: '20px 0' }}
                        name='psd'
                        //   label='姓名'
                        // 密码在6-12为 数字 字母 组合
                        rules={[{ required: true, message: '密码不能为空'},{pattern:/^[a-zA-Z0-9]{6,12}$/ , message: '密码格式不正确'}]}
                    >
                        <Input onChange={console.log} placeholder='请输入密码' />
                    </Form.Item>
                </Form>

            </div>
            <div style={{ position: 'fixed', bottom: '25px', left: '40%',textAlign:'center' }}>
                <p>使用飞常准预定</p>
                <p>免账号出票</p>
            </div>
        </div>
    )
}

export default Index
